<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link rel="stylesheet" href="../common-resources/js/layui/css/layui.css">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  </head>
  
<style>
.main {
  display: flex;
  flex-direction: row;
}

.sider {
  height: 800px;
}

.main-right {
  
  display: inline-block;
  margin-top: 1rem;
  margin-left: 4rem;
  width: 60%;
}
.sider-my {
  height: 150px;
  background-color: #9ad1a9; 
}
.icon {
  text-align: center;
  margin-bottom: 10%;
  
}
.submenu-main {
  margin-bottom: 2rem;
  border: solid 2px #c9c9c9; 
  width: 250px;
  height: 240px;
}
.jump {
  width: 250px;
  height:180px;
  margin: auto;
  text-align: center;
}
.submenu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  
  
}
.text {
  width: 250px;
  height: 60px;
}
.img {
  height: 60px;
  margin-top: 10%;
  border-radius:50%; 
  border-radius:50%; 
 
}
.img2 {
  width: 210px;
  height: 160px;
  
 
}
.layui-nav {
  background-color: #009688;  

}

.font {
  margin-left: 1rem;
  color: orange;
  font-size:1rem;
}
.more {
  float: right;
}


</style>
<body>
      

  <div class="main">
    <div class="sider">
        <div class="sider-my">
         <div class="icon">
          <img src="techbear.jpg" alt="" class="img">
        </div>
     <h2 style="text-align: center;">Techbear</h2>

          

        </div>
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
          <li class="layui-nav-item">
            <a href="javascript:;">我的Dreamtree<span class="layui-badge-dot"></span></a>
            <dl class="layui-nav-child">
              <dd><a href="my.html">我的项目</a></dd>
              <dd><a href="javascript:;">选项2</a></dd>
              <dd><a href="">跳转</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;">消息中心<span class="layui-badge">4</span></a>
            <dl class="layui-nav-child">
              <dd><a href="">移动模块</a></dd>
              <dd><a href="">后台模版</a></dd>
              <dd><a href="">电商平台</a></dd>
              <dd><a href="">电商平台</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">信誉积分</a></li>
          <li class="layui-nav-item"><a href="mycollect.html">我的收藏 </a></li>
          <li class="layui-nav-item"><a href="">我的认证</a></li>
          <li class="layui-nav-item"><a href="">界面偏好</a></li>
          <li class="layui-nav-item"><a href="">安全设置</a></li>
          <li class="layui-nav-item"><a href="">个人资料</a></li>
          <li class="layui-nav-item"><a href="" style="text-align: center;">——</a></li>
          <li class="layui-nav-item"><a href="" style="text-align: center;">——</a></li>
          <li class="layui-nav-item"><a
             href="" style="text-align: center;">——</a></li>
        </ul>
    </div>


    

   <div class="main-right">
    <div class="layui-tab layui-tab-brief">
      <ul class="layui-tab-title">
        <li class="layui-this">进行中的树</li>
        <li>成长完的树</li>
      </ul>
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="submenu">
            <div class="submenu-main">
            <div class="jump">
              <a href="javascript:" class="t"><img src="techbear.jpg" alt="" class="img2"></a>
            </div>
            <div class="text">
            <p> 简介简介简介简介简介简介简介简介简介简介简介</p>
            <a href="javascript:" class="font x">修改</a>
            <a href="" class="font">删除</a>
            <a href="" class="more"><i class="layui-icon">&#xe671;</i></a>  
            </div>
            </div> 

            



            <div class="submenu-main">
              <div class="jump">
                <a href="javascript:" class="t"><img src="techbear.jpg" alt="" class="img2"></a>
              </div>
              <div class="text">
              <p> 简介简介简介简介简介简介简介简介简介简介简介</p>
              <a href="" class="font">移动</a>
              <a href="" class="font">删除</a>
              </div>
            </div>

            <div class="submenu-main">
              <div class="jump">
                <a href="javascript:" class="t"><img src="techbear.jpg" alt="" class="img2"></a>
              </div>
              <div class="text">
              <p> 简介简介简介简介简介简介简介简介简介简介简介</p>
              <a href="" class="font">移动</a>
              <a href="" class="font">删除</a>
              </div>
            </div>

            <div class="submenu-main">
              <div class="jump">
                <a href="javascript:" class="t"><img src="techbear.jpg" alt="" class="img2"></a>
              </div>
              <div class="text">
              <p> 简介简介简介简介简介简介简介简介简介简介简介</p>
              <a href="" class="font">移动</a>
              <a href="" class="font">删除</a>
              </div>
            </div>

            <div class="submenu-main">
              <div class="jump">
                <a href="javascript:" class="t"><img src="techbear.jpg" alt="" class="img2"></a>
              </div>
              <div class="text">
              <p> 简介简介简介简介简介简介简介简介简介简介简介</p>
              <a href="" class="font">移动</a>
              <a href="" class="font">删除</a>
              </div>
            </div>


             <div class="submenu-main">
              <div class="jump">
                <a href="javascript:" class="t"><img src="techbear.jpg" alt="" class="img2"></a>
              </div>
              <div class="text">
              <p> 简介简介简介简介简介简介简介简介简介简介简介</p>
              <a href="" class="font">移动</a>
              <a href="" class="font">删除</a>
              </div>
            </div>

            </div> 
           
        </div>

        <div class="layui-tab-item">内容2</div>
       
      </div>
    </div>
   </div>
  </div>
      

  <script src="../common-resources/js/layui/layui.js" ></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
     layui.use('element', function(){
        var element = layui.element;

        element.on('nav(nav-main)', function(elem){
            console.log(elem.context.innerText); //得到当前点击的DOM对象
        });
    });

     var btn = document.querySelector(".t");
    console.log(btn)
    //一般直接写在一个js文件中t
    btn.onclick = function (){
        console.log(123)
        layui.use('layer', function(){
            var layer = layui.layer;

            // layer.msg('hello');
            layer.open({
                title: "新建",
                type: 2,
                content: 'newtree.html', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                area: ['650px', '600px']
            });
        });
    };

    var btn = document.querySelector(".x");
    console.log(btn)
    //一般直接写在一个js文件中t
    btn.onclick = function (){
        console.log(222)
        layui.use('layer', function(){
            var layer = layui.layer;

            // layer.msg('hello');
            layer.open({
                title: "新建",
                type: 2,
                content: 'modifytree.html', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                area: ['650px', '600px']
            });
        });
    };
      </script>
  </body>
</html>


